<!--登录页-->
<style scoped lang="less">
    a,a:hover,a:active,a:visited,a:link,a:focus,div{
      -webkit-tap-highlight-color:rgba(0,0,0,0);
      -webkit-tap-highlight-color: transparent;
      outline:none;
      background: none;
      text-decoration: none;
    }
    input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #333;
    }
    .bg-white:after{
      content:'';
      position:fixed;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      z-index: -1;
    }
    .login-btn{
      height:48px;
      line-height: 48px;
      background:rgba(119,186,189,1);
      border-radius:4px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      cursor:pointer !important;
    }
    .login-vision{
      text-align: center;
      font-size:12px;
      color:rgba(191,191,191,1);
      margin:25px 0 0;
      line-height: 1;
      height: 12px;
    }
    .login-box{
      transform:translate(-50%,-50%);
      position: absolute;
      top:45%;
      left: 50%;
      width: 100%;
    }
    .login-forget{
      text-align: right;
      line-height: 1;
      padding:10px 0;
      margin:0 0 40px;
    }
    .login-forget a {
      color: #BFBFBF;
      text-decoration: none;
    }
    .logo-img{
      width: 2.55rem;
      margin:0 auto 0.34rem;
      text-align: center;
    }
    .logo-img img{
      width: 100%;
    }
    .logo-img .name{
      font-size: 0.28rem;
      color: #606F7A;
      line-height: 0.65rem;
      height: 0.65rem;
    }
    .login-footer{
      position: fixed;
      bottom: 0;
      width: 100%;
      left: 0;
      background:url('~images/bg/login_bg.png') no-repeat;
      background-size: 100% auto;
      height: 1.43rem;
    }
    .login-wrap {
      padding: 0 30px;
    }
    .login-form {
      height: 52px;
      position: relative;
    }
    .login-form input {
      float: left;
      width: 100%;
      height: 14px;
      padding: 30px 5px 8px;
      font-size: 16px;
      border: none;
      outline: none;
    }
    .login-form:after,
    .login-form:before {
      background: #EFEFEF;
      content: '';
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .login-form:before {
      height: 1px;
      z-index: 2;
      background: #77babd;
      transform: scalex(0);
      transition: transform .45s;
    }
    .login-form.focus-line:before {
      transform: scalex(1);
    }
  </style>

<template>
  <div class="bg-white">
    <div id="loadMask" class="loader-base" style="display:none">
      <div class="loader-wrap"></div>
    </div>
    <div class="login-box">
      <div class="logo-img">
        <img src="~images/logo/logo1.png">
        <!-- <div class="name">透明 · 智慧 · 共享</div> -->
      </div>
      <div class="login-wrap">
        <div class="login-form">
          <input type="tel" placeholder="请输入账号" id="userName" v-model="userName"></div>
        <div class="login-form">
          <input type="password" placeholder="请输入密码" id="userPwd" v-model="userPwd"></div>
        <div class="login-forget cf">
          <a class="f-r" href="/#/user/password?forget=1">忘记密码</a>
        </div>
        <div class="login-btn" id="subBtn" @click="login()">登 录</div>
        <div class="login-vision">版本号：v3.0</div>
      </div>
    </div>
    <div class="login-footer"></div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      userName:'',
      userPwd:'',
      nameFocus:false,
      pwFocus:false,
      ua:navigator.userAgent.toLowerCase(),
      RegistrationID:'',
    }
  },
  created(){
    this.$nextTick(function() {
      this.savePw();
      this.focus();
    });
  },
  methods:{
    savePw: function() {
      if (localStorage.userinfo) {
        var use = JSON.parse(localStorage.userinfo);
        this.userName = use.LogonUser;
        this.userPwd = use.Pwd;
        this.login();
      }
    },

    getQueryString(name){
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },

    btnC(){
      $("#subBtn").val("登录");
      $("#userName , #userPwd").removeAttr("readonly", false);
      $("#subBtn").removeAttr("disabled", false);
    },

    login(){
      // 用户名
      if (!this.userName) {
        this.Toast({
          message:'请输入用户名'
        })
        return;
      };
      // 密码
      if (!this.userPwd) {
        this.Toast({
          message:'密码不能为空'
        })
        return;
      };
      let code = this.getQueryString('code'),
          params = {
            LogonUser: this.userName,
            Pwd: this.userPwd,
            Code: code
          };

      $("#subBtn").val("正 在 登 录 中 ...");
      $("#userName, #userPwd").attr("readonly", true);
      $("#subBtn").attr("disabled", "disabled");

      this.Ajax.post('Login', params).then((res) => {
        if (res.IsSuccess) {
          res.Data.Pwd = this.userPwd;
          var allData = res.Data;          
          localStorage.userinfo = JSON.stringify(allData);
           this.$router.push({
              path: "/index"
            });
        } else {
          $("#userName, #userPwd").attr("readonly", false);
          $("#subBtn").removeAttr("disabled");
          this.Toast({
            message:res.ErrorMessage || '操作失败，请稍后重试'
          });
        }
        this.btnC();
      });
    },
    focus(){
      $('input').each(function () {
        $(this).focus(function () {
          $(this).parent().addClass('focus-line');
        });
        $(this).blur(function () {
          $(this).parent().removeClass('focus-line');
        });
      })
    }
  }
}
</script>